<template>
   <div id="container">
    <div id="coordinate" style="">
      <p><span>【相机】</span>
        姿态：<span class="span1">{{cameraOrientation.heading}}&nbsp&nbsp{{cameraOrientation.pitch}}&nbsp&nbsp{{cameraOrientation.roll}}</span>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        位置：<span>{{cameraPositiontoDegrees.lon}}&nbsp&nbsp{{cameraPositiontoDegrees.lat}}&nbsp&nbsp{{cameraPositiontoDegrees.height}}</span>
        </p>
    </div>
     <div class="my-toolbar">
       <button type="button" class="my" title="按下" @click="switchFrame()">
         <img src="../../src/data/image/双模式切换.svg" style="display: block; width: 22px; height: 22px; margin: auto">
       </button>
       <br>
       <button type="button" class="my" title="测试功能" @click="test()">
         <img src="../../src/data/image/测试.svg" style="display: block; width: 28px; height: 28px; margin: auto">
       </button>
     </div>
    <div id="mapContainer"></div>
   </div>
</template>

<script>
  import {eventBus, Gisevevts} from "../../src/script/events";
  import {initMap,getRectangle,setRectangle} from "../../src/script/cesiumFunction/cesiumBaseF"


  export default{
    name:"CesiumContainer",
    props: {
      rectangle:Object
    },
    data(){
      return {
        msg: 'Welcome to Your Vue.js App',
        cameraPositiontoDegrees:{
          lon:123,
          lat:456,
          height:789
        },
        cameraOrientation: {
          heading:20,
          pitch:30,
          roll:1
        },

      }
    },
    created() {//页面渲染前，即通常初始化某些属性值，然后再渲染成视图
    },
    mounted() {
      currentFrameName = 'cesium';
      initMap('初始化cesium');
      if(this.rectangle){
        setRectangle(this.rectangle);
      }
      this.init();
    },
    methods:{
      test(){
      },
      switchFrame(){
        eventBus.$emit(Gisevevts["handlerMapFrameSwitch"],getRectangle());
      },
      init(){
        //开启渲染监听
        this.postRenderAdd(this.handler)
      },
      handler(){
        let camera = viewer.camera;
        try { //切换二三维的时候，会出错
          this.cameraOrientation.heading = Cesium.Math.toDegrees(camera.heading).toFixed(4);
          this.cameraOrientation.pitch = Cesium.Math.toDegrees(camera.pitch).toFixed(4);
          this.cameraOrientation.roll = Cesium.Math.toDegrees(camera.roll).toFixed(4);
        } catch (e) {
        }

        //三维视图下，这两个一样，可以正常转经纬度。二维情况下cartographic_1的获取的不太对
        let cartographic_1 = Cesium.Cartographic.fromCartesian(camera.position);
        let cartographic = viewer.camera.positionCartographic;

        this.cameraPositiontoDegrees.lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(3);
        this.cameraPositiontoDegrees.lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(3);
        this.cameraPositiontoDegrees.height = cartographic.height.toFixed(3);
      },

      postRenderAdd(theHandler){
        viewer.scene.postRender.addEventListener(theHandler);
      },
    },
    beforeDestroy() {
      viewer.destroy();
      viewer = null;
      currentFrameName = '';
    }

  }
</script>

<style scoped>
  .my-toolbar{
    position: absolute;
    z-index: 200;
    top: 200px;
    right: 5px;
    width: auto;
  }
  .my {
    display: inline-block;
    position: relative;
    background: #303336;
    border: 1px solid #444;
    color: #edffff;
    fill: #edffff;
    margin: 2px 3px;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border-radius: 14%;
    padding: 0;
    vertical-align: middle;
    z-index: 0;

  }
  .my:hover{
    color: #fff;
    fill: #fff;
    background: #48b;
    border-color: #aef;
    -webkit-box-shadow: 0 0 8px #fff;
    box-shadow: 0 0 8px #fff;
  }
  .my:active{
    color: #000;
    fill: #000;
    background: #adf;
    border-color: #fff;
    -webkit-box-shadow: 0 0 8px #fff;
    box-shadow: 0 0 8px #fff;
  }
  .my:focus{
    color: #fff;
    fill: #fff;
    border-color: #ea4;
    outline: none;
  }


  #coordinate{
    border-radius: 10px;
    top: 3px;
    left: 50%;
    transform: translate(-50%);
    height: 30px;
    width: auto;
    position: absolute;
    color: honeydew;
    z-index: 100;
    background-color: #2c3e50;
    margin: 3px;
  }

  #coordinate p{
    line-height:30px;
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 10px;
  }
  #coordinate2 p{
    line-height:30px;
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 10px;
  }
  #container,#mapContainer{
    width:100%;
    height:100%;
}
</style>
